VSCode中安装Live Server插件实现Html网页代码的实时预览 |
您所在的位置:网站首页 › 图片预览插件 保存不了怎么回事 › VSCode中安装Live Server插件实现Html网页代码的实时预览 |
VSCode中安装Live Server插件实现Html网页代码的实时预览 利用寒假时间学习了一些基本的网页知识,在编写Html代码时可以利用IDEA、WebStorm、Dream Weaver等工具,当然也可以选择使用拥有丰富插件、可以编写多种语言的轻量开发工具—VSCode,今天来介绍一下如何在VSCode中编写Html语言,并通过安装插件实现网页代码的实时预览。 1、打开VSCode,找到“扩展”并打开 ![]() 如果没有打开左侧的工具栏,也可以在"查看—>扩展"中打开 ![]() 2、在插件搜索栏中输入" Live Server" 来查找插件 ![]() 然后点击"安装",等待安装完毕 ![]() 3、安装插件完成后,重启VSCode软件(不要忘记这一步) 4、重启之后,打开资源管理器,接着新建一个工作区(其实也可以直接将一个空文件夹拖到VSCode中),然后我们在工作区中新建一个Html文件,就可以来编写Html文件了。这里注意:如果单独将一个HTML文件拖动到VSCode中是无法使用Live Server的,即无法实现实时预览,这是需要把该HTML文件放到我们所创建的工作区(文件夹)中,才可以发挥该插件的功能,上述工作完成后,在状态栏上看到一个Go Live标识,单击该标识会自动打开浏览器并显示网页文件的效果 ![]() 下方的“Go Live”标识 ![]() 6、编写好Html文件后,点击下方的“Go Live”标识,即可自动打开默认浏览器并运行编写代码,在编写的过程中可以实现网页代码的实时预览。 ![]() 另一种打开方式是右击选中的Html文件,点击“Open With Live Server”,同样可以实现上述效果。 ![]() 之后我们在编辑代码的过程里,只要按下“Ctrl+S”(即将文件进行保存),就可以实时看到代码的运行效果。 注意:在点击Go Live后可能会提示我们“Server is Started at port : 5500”(如下图所示),个人也不太清楚这时什么原因,希望明白的大神可以进行说明与解释,但这个提醒似乎并不影响这个插件的功能 ![]() 最后,我们可以愉快地利用Live Server插件,在VSCode中一边写代码,一边实时预览网页代码的运行效果了。 |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |